<template>
  <a-modal
    :title="form.id ? '修改' : '新增'"
    width="800px"
    v-model="visible"
    @ok="submit"
    :afterClose="closeModal"
    :destroyOnClose="true"
    :confirmLoading="btnLoading"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="真实姓名" prop="name">
        <a-input placeholder="请输入真实姓名" v-model="form.name" allowClear />
      </a-form-model-item>
      <a-form-model-item label="会员等级" prop="level">
        <a-select placeholder="请选择会员等级" v-model="form.level" allowClear>
          <a-select-option v-for="item of params.worker_level" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="服务分类" prop="cat_id">
        <a-select mode="multiple" placeholder="请选择服务分类" v-model="form.cat_id" allowClear>
          <a-select-option allowClear v-for="item of params.worker_cat" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="选择用户" prop="user_id">
        <div class="flex">
          <a-input class="inp" disabled placeholder="请选择用户" :value="nickname"></a-input>
          <a-button type="primary" @click="$refs['selectUser'].visible = true"> 选择 </a-button>
        </div>
      </a-form-model-item>
      <a-form-model-item label="图片" v-if="form.id && form.pic_url.length">
        <cyyUploadImg
          :hasApply="true"
          @deleteImg="(e) => form.pic_url.splice(e.index, 1)"
          :imgList.sync="form.pic_url"
          dataType="list"
        >
        </cyyUploadImg>
      </a-form-model-item>
    </a-form-model>

    <selectUser ref="selectUser" type="user" scene="worker" @select="select"></selectUser>
  </a-modal>
</template>

<script>
import { workerSave } from '@/api/marketing/serviceHome'
import selectUser from '@/components/SelectUser/newSelectUser'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  components: {
    selectUser,
    cyyUploadImg,
  },
  props: {
    params: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      visible: false,
      btnLoading: false,
      form: {
        name: '',
        level: '',
        cat_id: [],
        user_id: '',
      },
      rules: {
        name: [{ required: true, message: '请填写', trigger: 'blur' }],
        level: [{ required: true, message: '请选择', trigger: 'change' }],
        cat_id: [{ required: true, message: '请选择', trigger: 'change' }],
        user_id: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      nickname: '',
    }
  },

  methods: {
    select({ id, name }) {
      this.form.user_id = id
      this.nickname = name
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.form))
          const hide = this.$message.loading('加载中', 0)

          this.btnLoading = true

          if (form.id) {
            form.pic_url = JSON.stringify(form.pic_url)
          }

          form.cat_id = form.cat_id.join(',')
          let res = await workerSave(form)
          hide()
          this.btnLoading = false

          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.nickname = ''
            this.$emit('callback')
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },

    delPic(e) {
      console.log('e,', e)
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .inp {
    flex: 1;
    overflow: hidden;
  }
}
</style>
